<template>
  <div class="todayTopTable">
    <div style="width:100%;display: flex;color: #3de7c9;height:50px;margin-left: 50px; align-items: center;">每日新增排行</div>
    <dv-scroll-ranking-board :config="config" style="width:93%;height:80%" />
  </div>
</template>

<script>


export default {
  name: "TodayDataTopTable",
  props: {
    areaTopData:[]
  },
  data() {
    return {
      config:{}
    }
  },
  components: {},
  watch: {
    areaTopData:{
      handler(val) {
        this.drawTable(val)
      },
      deep: true,
      immediate: true, // 初次监听即执行
    }
  },
  mounted() {
  },
  methods: {
    drawTable(data) {
      let resData = []
      for (let info in data) {
        let t = {}
        let tData = data[info]
        t.name = tData.addressName
        t.value = tData.todayConfirm
        resData.push(t)
      }
      let resConf = {
        data: resData,
        unit: '单位',
        rowNum:4,
        valueFormatter ({ value }) {
          value = value + ""
          const numbers = value.toString().split('').reverse()
          const segs = []
          while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
          return segs.join(',').split('').reverse().join('')
        }
      }
      this.config = {...resConf}
    },
  }
}
</script>

<style scoped lang="scss">
.todayTopTable{
  width:100%;
  height:85%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
</style>
